<template>
    <div class="right-content">
      <!-- 头部查询区域 -->
        <el-form :inline="true" class="demo-form-inline">
          <div style="display:inline-block">
            <el-form-item>
              <el-input v-model="empName" placeholder="输入员工姓名"></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="initEmps">搜索</el-button>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" style="width:6vw" @click="showAdvanceSearchVisible = !showAdvanceSearchVisible">高级搜索</el-button>
            </el-form-item>
            <el-form-item>
              <el-button @click="getothersDataList">重置</el-button>
            </el-form-item>
          </div>
          <el-form-item>
            <el-button type="primary" @click="exportExcel()">导出</el-button>
          </el-form-item>
        </el-form>
        <!-- 高级查询 start -->
        <div
          style="width:97%;border:1px solid #409eff;border-radius:5px;box-sizing:border-box;padding:5px;margin:10px auto"
          v-show="showAdvanceSearchVisible"
        >
          <el-row>
            <el-col :span="5">
              政治面貌:
              <el-select style="width: 60%" v-model="searchValue.politicId">
                <el-option
                v-for="item in politicsStatuss"
                :key="item.id"
                :value="item.id"
                :label="item.name">
                </el-option>
              </el-select>
            </el-col>
            <el-col :span="4">
              民族:
              <el-select placeholder="选择民族" style="width: 60%" v-model="searchValue.nationId">
                <el-option
                  v-for="item in nations"
                  :key="item.id"
                  :value="item.id"
                  :label="item.name">
                  </el-option>
                </el-select>
            </el-col>
            <el-col :span="4">
              职位:
              <el-select style="width: 60%" v-model="searchValue.posId">
                  <el-option
                  v-for="item in positions"
                  :key="item.id"
                  :value="item.id"
                  :label="item.name">
                  </el-option>
                </el-select>
            </el-col>
            <el-col :span="4">
              职称:
              <el-select style="width: 60%" v-model="searchValue.jobLevelId">
                  <el-option
                  v-for="item in joblevels"
                  :key="item.id"
                  :value="item.id"
                  :label="item.name">
                  </el-option>
                </el-select>
            </el-col>
            <el-col :span="7" style="padding-top:1.5vh">
              聘用形式:
              <el-radio-group style="width: 70%" v-model="searchValue.engageForm">
                  <el-radio label="劳动合同" value="劳动合同"></el-radio>
                  <el-radio label="劳务合同" value="劳务合同"></el-radio>
                </el-radio-group>
            </el-col>
          </el-row>
          <el-row style="margin-top:5px">
            <el-col :span="5">
              所属部门:
              <el-select style="width: 60%" v-model="searchValue.departmentId">
                <el-option
                  v-for="item in departments"
                  :key="item.id"
                  :value="item.id"
                  :label="item.name">
                  </el-option>
                </el-select>
            </el-col>
            <el-col :span="10">
              入职日期:
              <el-date-picker
                v-model="searchValue.beginDateScope"
                type="daterange"
                value-format="yyyy-MM-dd"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期">
              </el-date-picker>
            </el-col>
            <el-col :span="5" :offset="4">
              <el-button @click="clearquery">取消</el-button>
              <el-button type="primary" @click="initEmps('advanced')">搜索</el-button>
            </el-col>
          </el-row>
        </div>
        <!-- 高级查询 end -->
        <!-- 内容区域 -->
        <div class="body-table">
          <el-table
            ref="addressbookmultipleTable"
            height="86%"
            :data="currentData"
            :header-cell-style="{height: '7vh'}"
            :cell-style="cellStyle"
            @selection-change="handleSelectionChange"
          >
            <el-table-column
              type="index"
              width="80"
              label="序号"
              header-align="center"
              align="center">
            </el-table-column>
            <el-table-column
              prop="workId"
              label="员工工号"
              header-align="center"
              align="center">
            </el-table-column>
            <el-table-column
              prop="name"
              label="姓名"
              header-align="center"
              align="center">
            </el-table-column>
            <el-table-column
              prop="gender"
              label="性别"
              header-align="center"
              align="center">
            </el-table-column>
            <el-table-column
              prop="department.name"
              label="所属部门"
              header-align="center"
              align="center">
            </el-table-column>
            <el-table-column
              prop="position.name"
              label="员工职务"
              header-align="center"
              align="center">
            </el-table-column>
            <el-table-column
              prop="phone"
              label="电话号码"
              header-align="center"
              align="center">
            </el-table-column>
            <el-table-column
              prop="address"
              label="联系地址"
              :show-overflow-tooltip="true"
              header-align="center"
              align="center">
            </el-table-column>
            <el-table-column
              fixed="right"
              header-align="center"
              align="center"
              label="操作">
              <template slot-scope="scope">
                <!-- <el-link type="primary" @click="ShareCustomer(scope.row)" style="width:4vw">共享名片</el-link>
                <el-link type="primary" @click="showProData(scope.row)" style="width:3vw">详情</el-link> -->
                <el-button type="primary" @click="ShareCustomer(scope.row)" style="width:50%;height:3vh">共享名片</el-button>
                <el-button type="primary" @click="showProData(scope.row)" style="width:35%;height:3vh">详情</el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <!-- 分页器 -->
        <div class="block">
          <el-pagination
            align="right"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-sizes="[10, 15, 20]"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total">
          </el-pagination>
        </div>
        <!-- 查看个人详情弹窗 -->
        <others-add-or-update v-if="OthersAddOrUpdateVisible" ref="OthersAddOrUpdate" @refreshDataList="getothersDataList"></others-add-or-update>
        <!-- 查看名片夹弹窗 -->
        <!-- <book-share-customer v-if="BookShareCustomerVisible" ref="BookShareCustomer" :ShareCardsData="BookShareCustomerdata"></book-share-customer> -->
        <el-dialog
        :title="pname + '的共享名片夹'"
        :close-on-click-modal="false"
        :visible.sync="ShareVisible"
        top="20px"
        class="sharepro">
        <!-- 名片夹部分 start -->
        <div class="dialogbody" v-if="!prodialogVisible">
          <el-card class="box-card" v-for="item in cardsList" :key="item.id" @click.native="getprocard(item)">
            <div slot="header" class="clearfix">
              <div>
                <i class="el-icon-folder" style="margin-right: 2px"></i>
                <span>{{item.name}}</span>
              </div>
            </div>
            <div>
              <i class="el-icon-user"></i>
              {{item.employees.length}}
            </div>
          </el-card>
        </div>
        <!-- 名片夹部分 end -->
        <!-- 名片部分 start -->
        <div class="dialogbody" v-if="prodialogVisible">
          <div style="width: 100%">
            <i class="el-icon-s-home" @click="prodialogVisible = false"></i>
          </div>
          <el-card class="box-card2" v-for="item in procardList" :key="item.id">
            <div slot="header" class="clearfix">
              <div>
                <i class="el-icon-user" style="margin-right: 2px"></i>
                <span>{{item.name}}</span>
              </div>
            </div>
            <div style="width: 100%">
              <p>公司: {{item.company}}</p>
              <p>电话：{{item.phone}}</p>
              <p>邮箱：{{item.email}}</p>
              <p>地址: {{item.address}}</p>
            </div>
          </el-card>
        </div>
        <!-- 名片部分 end -->
        <span slot="footer" class="dialog-footer">
          <el-button type="primary" @click="closeVisible()">确 定</el-button>
        </span>
      </el-dialog>
    </div>
</template>

<script>
export default {
  name: 'AddressBook',
  data() {
    return {
      searchValue: {
        politicId: null,
        nationId: null,
        posId: null,
        jobLevelId: null,
        engageForm: '',
        departmentId: null,
        beginDateScope: null
      },
      empName: '',
      showAdvanceSearchVisible: false,
      tableData: [], // 表格中所有员工的数据
      currentData: [], // 当前页面的所有员工的数据
      multipleSelection: [], // 选定的多个复选框对象
      total: 0,
      value: '',
      currentPage: 1, // 当前页码
      pageSize: 10, // 每页选定的显示条数
      OthersAddOrUpdateVisible: false,
      // BookShareCustomerVisible: false,
      nations: [],
      positions: [],
      departments: [],
      joblevels: [],
      politicsStatuss: [],
      // BookShareCustomerdata: [] // 要传给名片夹子组件的数组
      ShareVisible: false,
      prodialogVisible: false, // 显示名片
      id: 0, // 客户id
      pname: '', // 客户姓名
      cardsList: [], // 名片夹列表
      procardList: [] // 名片列表
    }
  },
  components: {
    OthersAddOrUpdate: resolve => require(['../ProFile/Others-add-or-update.vue'], resolve)
    // BookShareCustomer: resolve => require(['./BookShareCustomer.vue'], resolve)
  },
  // 生命周期
  mounted() {
    this.getothersDataList()
    this.initData()
  },
  methods: {
    // 个人的共享客户文件夹弹窗打开
    ShareCustomer(data) {
      this.ShareVisible = true
      this.prodialogVisible = false
      this.id = data.id
      this.pname = data.name
      this.getsharecards(this.id)
    },
    // 获取他人共享的名片夹
    getsharecards(id) {
      this.getRequest('/cards/others/' + id).then(resp => {
        if (resp) {
          this.cardsList = resp.data
          // console.log('this.cardsList', resp.data)
        }
      }, error => console.log(error))
    },
    // 点击名片夹,查看名片
    getprocard(data) {
      this.procardList = data.employees
      this.prodialogVisible = true
    },
    // 关闭弹窗，清空数据
    closeVisible() {
      this.id = 0
      this.pname = ''
      this.cardsList.length = 0
      this.procardList.length = 0
      this.ShareVisible = false
    },
    // 导出
    exportExcel() {
      window.open('/common/emp/export', '_parent')
    },
    // 表格行高
    cellStyle() {
      return {
        height: '5vh',
        padding: '0'
      }
    },
    // 选择每页行数
    handleSizeChange(val) {
      this.pageSize = val
      this.currentPage = 1
      this.getothersDataList()
    },
    // 选择页码
    handleCurrentChange(val) {
      this.currentPage = val
      this.getothersDataList()
    },
    // 选择的复选框的数量
    handleSelectionChange(val) {
      this.multipleSelection = val
    },
    // 获取所有员工的数据列表
    getothersDataList() {
      this.getRequest(`admin/emp/${this.currentPage}/${this.pageSize}`).then((resp) => {
        if (resp) {
          this.total = resp.total
          this.currentData = resp.list
        } else {
          console.log('失败')
        }
      })
    },
    // 查看详情弹窗打开
    showProData(data) {
      this.OthersAddOrUpdateVisible = true // 显示个人信息弹出框
      this.$nextTick(() => {
        this.$refs.OthersAddOrUpdate.init(data)
      })
    },
    // 获取初始化的工作数据
    initData() {
      // 民族
      if (!window.sessionStorage.getItem('nations')) {
        this.getRequest('/sys/nations').then((resp) => {
          if (resp) {
            this.nations = resp.data
            window.sessionStorage.setItem('nations', JSON.stringify(resp.data))
          }
        })
      } else {
        this.nations = JSON.parse(window.sessionStorage.getItem('nations'))
      }
      // 部门
      if (!window.sessionStorage.getItem('departments')) {
        this.getRequest('/admin/deps').then((resp) => {
          if (resp) {
            this.departments = resp.data
            window.sessionStorage.setItem('departments', JSON.stringify(resp.data))
          }
        })
      } else {
        this.departments = JSON.parse(window.sessionStorage.getItem('departments'))
      }
      // 职称
      if (!window.sessionStorage.getItem('joblevels')) {
        this.getRequest('/sys/jobLevels').then((resp) => {
          if (resp) {
            this.joblevels = resp.data
            window.sessionStorage.setItem('joblevels', JSON.stringify(resp.data))
          }
        })
      } else {
        this.joblevels = JSON.parse(window.sessionStorage.getItem('joblevels'))
      }
      // 职位
      if (!window.sessionStorage.getItem('positions')) {
        this.getRequest('/sys/allPos').then((resp) => {
          if (resp) {
            this.positions = resp.data
            window.sessionStorage.setItem('positions', JSON.stringify(resp.data))
          }
        })
      } else {
        this.positions = JSON.parse(window.sessionStorage.getItem('positions'))
      }
      // 政治面貌
      if (!window.sessionStorage.getItem('politicsStatuss')) {
        this.getRequest('/sys/politics').then((resp) => {
          if (resp) {
            this.politicsStatuss = resp.data
            window.sessionStorage.setItem('politicsStatuss', JSON.stringify(resp.data))
          }
        })
      } else {
        this.politicsStatuss = JSON.parse(window.sessionStorage.getItem('politicsStatuss'))
      }
    },
    // 高级搜索
    initEmps(type) {
      var url = '/admin/emp/?currentPage=' + this.currentPage + '&size=' + this.pageSize
      if (type && type === 'advanced') {
        if (this.searchValue.politicId) {
          url += '&politicId=' + this.searchValue.politicId
        }
        if (this.searchValue.nationId) {
          url += '&nationId=' + this.searchValue.nationId
        }
        if (this.searchValue.posId) {
          url += '&posId=' + this.searchValue.posId
        }
        if (this.searchValue.jobLevelId) {
          url += '&jobLevelId=' + this.searchValue.jobLevelId
        }
        if (this.searchValue.engageForm) {
          url += '&engageForm=' + this.searchValue.engageForm
        }
        if (this.searchValue.departmentId) {
          url += '&departmentId=' + this.searchValue.departmentId
        }
        if (this.searchValue.beginDateScope) {
          url += '&beginDateScope=' + this.searchValue.beginDateScope
        }
      } else {
        url += '&name=' + this.empName
      }
      this.getRequest(url).then(resp => {
        if (resp) {
          this.currentData = resp.data
          this.total = resp.data.length
        }
      })
    },
    // 清空高级搜索
    clearquery() {
      this.searchValue = Object.assign(this.searchValue, {
        politicId: null,
        nationId: null,
        posId: null,
        jobLevelId: null,
        engageForm: '',
        departmentId: null,
        beginDateScope: null
      })
    }
  }
}
</script>

<style scoped>
@import '../../assets/css/table.css';
@import '../../assets/css/top-form.css';
.demo-form-inline {
  height: 5vh;
}
/** 分页器 start  */
.right-content > .block {
  position: absolute;
  top: 92%;
  right: 1.5%;
}
.el-pagination {
  align-items: center;
}
.el-pagination /deep/ span:not([class*=suffix]) {
  font: 1vw '宋体';
  padding-top: 0px;
}
.el-pagination /deep/ .el-pagination__total {
  padding-top: 5px !important;
}
.el-pagination /deep/ .el-input__inner {
  font: 1vw '宋体';
}
/** 分页器 end */
/**=========================== 表格 start ======================================*/
.right-content .body-table {
  width: 97%;
  height: 77%;
  margin: 0 auto;
  overflow: hidden;
  overflow-y: auto;
}
/** 名片夹 */
.sharepro /deep/ .el-dialog__body {
  padding: 0px 10px !important;
  overflow: hidden;
}
/** 弹框放名片夹部分 */
.dialogbody {
  width: 96%;
  height: 50vh;
  overflow-y: auto;
  /* background-color: cornflowerblue; */
}
/** 名片夹 */
.box-card {
  display: inline-block;
  width: 25%;
  height: 13vh;
  margin-right: 3vw !important;
}
.dialogbody /deep/ .el-card__header {
  padding: 10px !important;
}
.box-card:hover {
  cursor: pointer;
}
/** 名片夹 header*/
.dialogbody .el-card__header {
  padding: 5px 5px !important;
  padding-bottom: 0px !important;
}
.dialogbody .clearfix div {
  display: inline-block;
  width: 100%;
  overflow-x: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: left;
}
/** 名片部分 */
.box-card2 {
  display: inline-block;
  width: 29%;
  height: 20vh;
  margin-right: 1vw !important;
}
.box-card2 .el-card__body {
  padding: 0px 10px !important;
}
/** 名片body > p 的样式 */
.box-card2 p {
  width: 100%;
  overflow-x: hidden;
  text-overflow: ellipsis;
  white-space: wrap;
  margin: 0px;
  margin-top: 5px;
}
.el-icon-s-home {
  color: rgba(64,158,255);
  font-size: 1.5vw;
  /* width: 2vw;
  height: 2vh; */
  margin-bottom: 1vh;
}
.el-icon-s-home:hover {
  cursor: pointer;
}
.el-icon-folder {
  color: rgba(64,158,255);
}
.el-icon-user {
  color: rgba(64,158,255);
}
</style>
